<template>
	<view>
		<!-- 最外层的容器 -->
		<view class="my-settle-container">
		  <!-- 全选区域 -->
		  <label class="radio">
		    <radio color="#ff0000" :checked="isFullCheck" @click="changeFullChecked(isFullCheck)"/><text>全选</text>
		  </label>
		
		  <!-- 合计区域 -->
		  <view class="amount-box">
		    合计:<text class="amount">￥{{checkedPrice}}</text>
		  </view>
		
		  <!-- 结算按钮 -->
		  <view class="btn-settle" @click="settlement">结算({{isCheckedCount}})</view>
		</view>
	</view>
</template>

<script>
	import {mapState,mapGetters,mapMutations} from 'vuex'
	export default {
		name:"my-settle",
		data() {
			return {
			};
		},
		computed:{
			...mapGetters('mcart',['isCheckedCount','total','checkedPrice']),
			...mapGetters('muser',['addressStr']),
			...mapState('mcart',['cart']),
			...mapState('muser',['address','userInfo']),
			isFullCheck(){
				return this.total === this.isCheckedCount
			}
		},
		methods:{
			...mapMutations('mcart',['changeFullState','deleteGoods']),
			changeFullChecked(state){
				let bool = !state
				this.changeFullState(bool)
			},
			settlement(){
				// 判断是否符合结算条件
				if(JSON.stringify(this.address)=='{}') return uni.$showMsg('您还没有填写您的地址')
				if(this.isCheckedCount==0)return uni.$showMsg('您还没有勾选任何商品')
				if(JSON.stringify(this.userInfo)=='{}') return this.lazyLoad()
				else {
					this.payOrder()
				}
			},
			lazyLoad(){
				let c = 4
				let tim =  setInterval(()=>{
					c-= 1
					 uni.showToast({
					    icon: 'none',
					    title: '请登录后再结算！' + c + ' 秒后自动跳转到登录页',
					    mask: true,
					    duration: 1500
					  })
					if(c<=0){
						clearInterval(tim)
						uni.switchTab({
								url:'/pages/my/my'
						})
					}
				},1000)
			},
			async payOrder() {
			  // 1. 创建订单
			  const orderInfo = {
			    // 开发期间，注释掉真实的订单价格，
			    // order_price: this.checkedGoodsAmount,
			    order_price: 0.01,
			    consignee_addr: this.addressStr,
			    goods: this.cart.filter(x => x.goods_state).map(x => ({ goods_id: x.goods_id, goods_number: x.goods_count, goods_price: x.goods_price }))
			  }
			  // 1.2 发起请求创建订单
			  const { data: res } = await uni.$http.post('/api/public/v1/my/orders/create', orderInfo)
			  if (res.meta.status !== 200) return uni.$showMsg('创建订单失败！')
			  // 1.3 得到服务器响应的“订单编号”
			  const orderNumber = res.message.order_number
			  let c = 4
			  let time = setInterval(()=>{
				  c--
				  uni.showLoading({
				  	mask:true,
					title:'正在支付',
				  })
				  if(c<=0) {
					  clearInterval(time)
					  uni.$showMsg(`订单${orderNumber}模拟支付成功`)
					  console.log(orderInfo.goods[0].goods_id);
					  this.deleteGoods(orderInfo.goods[0].goods_id)
				  }
			  },1000)
			 }
		},
	}
</script>

<style lang="scss">
.my-settle-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  // 将背景色从 cyan 改为 white
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 5px;
  font-size: 14px;

  .radio {
    display: flex;
    align-items: center;
  }

  .amount {
    color: #c00000;
  }

  .btn-settle {
    height: 50px;
    min-width: 100px;
    background-color: #c00000;
    color: white;
    line-height: 50px;
    text-align: center;
    padding: 0 10px;
  }
}
</style>